<template>
  <div class="waterfall">
    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">基本信息</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="小程序名称" prop="product_name">
          <el-input v-model="form.product_name" placeholder="请输入小程序名称" />
        </el-form-item>
        <el-form-item label="AppId" prop="appid">
          <el-input v-model="form.appid" placeholder="请输入AppId" />
        </el-form-item>
        <el-form-item label="AppSecret" prop="app_secret">
          <el-input v-model="form.app_secret" placeholder="请输入AppSecret" />
        </el-form-item>
        <el-form-item label="小程序原始Id" prop="original_id">
          <el-input v-model="form.original_id" placeholder="如使用百度广告，此处必填" />
        </el-form-item>
        <el-form-item label="用户协议地址" prop="privacy_url">
          <el-input v-model="form.privacy_url" placeholder="请输入用户协议地址" />
        </el-form-item>
        <!--        <el-form-item label="获取urlSchme地址" prop="original_id">-->
        <!--          <el-input v-model="form.original_id" placeholder="如使用百度广告，此处必填" />-->
        <!--        </el-form-item>-->
        <el-form-item label="审核模式" prop="is_audit">
          <el-switch v-model="form.is_audit" />
          <p class="fon-12 font-color-2">小程序审核通过后请及时关闭审核模式</p>
        </el-form-item>
        <el-form-item label="是否开启回传状态" prop="is_return">
          <el-switch v-model="form.is_return" />
        </el-form-item>
      </el-form>
    </div>

    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">退出播放引导订阅弹窗配置</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="弹窗开关" prop="quit_box_switch">
          <el-switch v-model="form.quit_box_switch" />
        </el-form-item>
        <el-form-item label="弹窗标题" prop="quit_box_title">
          <el-input v-model="form.quit_box_title" placeholder="请输入弹窗标题" />
        </el-form-item>
        <el-form-item label="弹窗内容" prop="quit_box_content">
          <el-input v-model="form.quit_box_content" placeholder="请输入弹窗内容" />
        </el-form-item>
        <el-form-item label="按钮" prop="quit_box_btn">
          <el-input v-model="form.quit_box_btn" placeholder="请输入按钮文案（加入追剧）" />
        </el-form-item>
      </el-form>
    </div>

    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">功能配置</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="剧集价格开关" prop="episode_price_switch">
          <el-switch v-model="form.episode_price_switch" />
        </el-form-item>
      </el-form>
    </div>

    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">IOS用户充值</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="是否允许IOS用户充值" prop="is_ios_recharge">
          <el-switch v-model="form.is_ios_recharge" />
          <p class="fon-12 font-color-2">一般情况下打开，当被微信查到IOS支付违规时请关闭</p>
          <p class="fon-12 font-color-2">打开后，仅限非默认渠道IOS用户可以支付</p>
        </el-form-item>
        <el-form-item label="IOS观看集数解锁" prop="ios_r_start_series">
          <div class="flex ai-center">
            <p class="font-14 font-color-td">从</p>
            <el-input v-model="form.ios_r_start_series" min="1" type="number" class="ml-10 mr-10" style="width: 100px" />
            <p class="font-14 font-color-td">至</p>
            <el-input v-model="form.ios_r_end_series" min="1" type="number" class="ml-10 mr-10" style="width: 100px" />
            <p class="font-14 font-color-td">集连续观看后解锁</p>
          </div>
        </el-form-item>
        <el-form-item label="IOS观看时间解锁" prop="ios_r_min_unlock">
          <div class="flex ai-center">
            <el-input v-model="form.ios_r_min_unlock" min="1" type="number" class="ml-10 mr-10" style="width: 250px" />
            <p class="font-14 font-color-td">分钟观看后解锁</p>
          </div>
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
import { addMp, editMp, queryInfoMp } from '@/api/miniProgram/mp'

export default {
  name: 'MpAdd',
  data() {
    return {
      // 表单参数
      form: {
        product_name: undefined,
        appid: undefined,
        app_secret: undefined,
        original_id: undefined,
        privacy_url: undefined,
        is_audit: undefined,

        is_return: undefined,

        quit_box_switch: undefined, // 退出播放，追剧弹窗
        quit_box_title: undefined, // 退出播放，追剧弹窗
        quit_box_content: undefined, // 退出播放，弹窗内容
        quit_box_btn: undefined, // 退出播放，弹窗按钮文案

        episode_price_switch: undefined, // 剧集价格

        is_ios_recharge: undefined,
        ios_r_start_series: undefined,
        ios_r_end_series: undefined,
        ios_r_min_unlock: undefined
      },
      // 表单校验
      rules: {
        product_name: [
          { required: true, message: '请输入小程序名称', trigger: ['blur', 'change'] }
        ],
        appid: [
          { required: true, message: '请输入AppId', trigger: ['blur', 'change'] }
        ],
        app_secret: [
          { required: true, message: '请输入AppSecret', trigger: ['blur', 'change'] }
        ],
        ios_r_start_series: {
          validator: (rule, value, callback) => {
            if (value) {
              const int_ios_r_start_series = Number(this.form.ios_r_start_series)
              const int_ios_r_end_series = Number(this.form.ios_r_end_series)
              if (int_ios_r_start_series <= 0 || int_ios_r_end_series <= 0) {
                callback(new Error('配置项必须大于0'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          },
          trigger: ['blur', 'change']
        },
        ios_r_min_unlock: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                const int_ios_r_min_unlock = Number(this.form.ios_r_min_unlock)
                if (int_ios_r_min_unlock <= 0) {
                  callback(new Error('配置项必须大于0'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ]
      },
      detailId: ''
    }
  },
  watch: {
    '$route.query': {
      handler(val) {
        this.detailId = this.$route.query.id || ''
        if (this.detailId) {
          this.queryDetailFn()
        } else {
          this.reset()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async queryDetailFn() {
      this.reset()

      const res = await queryInfoMp({
        product_id: this.detailId
      })
      const {
        is_audit,
        is_ios_recharge,
        is_return,
        quit_box_switch,
        episode_price_switch,
        ios_r_start_series,
        ios_r_end_series,
        ios_r_min_unlock } = res
      res.is_audit = is_audit == 1
      res.is_ios_recharge = is_ios_recharge == 1
      res.is_return = is_return == 1
      res.quit_box_switch = quit_box_switch == 1
      res.episode_price_switch = episode_price_switch == 1
      res.ios_r_start_series = ios_r_start_series || undefined
      res.ios_r_end_series = ios_r_end_series || undefined
      res.ios_r_min_unlock = ios_r_min_unlock || undefined

      this.form = res
    },

    // 表单重置
    reset() {
      this.form = {
        product_name: undefined,
        appid: undefined,
        app_secret: undefined,
        original_id: undefined,
        privacy_url: undefined,
        is_audit: undefined,
        is_ios_recharge: undefined,
        is_return: undefined,

        quit_box_switch: undefined, // 退出播放，追剧弹窗
        quit_box_title: undefined, // 退出播放，追剧弹窗
        quit_box_content: undefined, // 退出播放，弹窗内容
        quit_box_btn: undefined, // 退出播放，弹窗按钮文案

        episode_price_switch: undefined // 剧集价格
      }
      this.resetForm('formInfoRef')
    },

    /** 保存按钮操作 */
    handleSubmit() {
      this.$refs['formInfoRef'].validate((valid) => {
        if (valid) {
          this.form.is_audit = this.form.is_audit ? 1 : 2
          this.form.is_ios_recharge = this.form.is_ios_recharge ? 1 : 2
          this.form.is_return = this.form.is_return ? 1 : 2
          this.form.quit_box_switch = this.form.quit_box_switch ? 1 : 0
          this.form.episode_price_switch = this.form.episode_price_switch ? 1 : 0
          this.form.ios_r_start_series = this.form.ios_r_start_series || 0
          this.form.ios_r_end_series = this.form.ios_r_end_series || 0
          this.form.ios_r_min_unlock = this.form.ios_r_min_unlock || 0

          if (this.detailId) {
            editMp(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.handleBack()
            })
          } else {
            addMp(this.form).then(res => {
              this.$modal.msgSuccess('添加成功')
              this.handleBack()
            })
          }
        }
      })
    },
    async handleBack() {
      await this.$tab.closePage({
        path: '/miniProgram/mp/add', name: 'MpAdd'
      })
      await this.$tab.refreshPage({ path: '/miniProgram/mp/list', name: 'MpList' })
      await this.$tab.openPage('小程序列表', '/miniProgram/mp/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.waterfall {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  // 指定两列，自动宽度
  grid-gap: 20px; // 横向，纵向间隔
  grid-auto-flow: row dense;  // 是否自动补齐空白
  grid-auto-rows: 20px;  // base高度，grid-row基于此运算
  .item {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
  }

  //.item:nth-of-type(3n+1) {
  //  grid-row: auto / span 10;
  //}
  //.item:nth-of-type(3n+2) {
  //  grid-row: auto / span 6;
  //}
  //.item:nth-of-type(3n+3) {
  //  grid-row: auto / span 8;
  //}
  .item:nth-child(1) {
    grid-row: auto / span 12;
  }
  .item:nth-child(2) {
    grid-row: auto / span 8;
  }
  .item:nth-child(3) {
    grid-row: auto / span 4;
  }
  .item:nth-child(4) {
    grid-row: auto / span 8;
  }
  .item:nth-child(5) {
    grid-row: auto / span 12;
  }

  .title-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

}
@media (max-width: 768px) {
  .waterfall {
    overflow-y: auto;
    grid-template-columns: repeat(1, 1fr);  // 指定一列，自动宽度
    .item:nth-child(1) {
      grid-row: auto / span 16;
    }
    .item:nth-child(4) {
      grid-row: auto / span 10;
    }
  }
}

//
//.waterfall {
//  padding: 20px;
//  display: flex;
//  justify-content: space-between;
//  flex-wrap: wrap;
//  .item {
//    width: 48%;
//    border: 1px solid #ccc;
//    border-radius: 4px;
//    margin-bottom: 20px;
//    padding: 20px;
//  }
//}
//
//.title-panel {
//  display: flex;
//  align-items: center;
//  justify-content: space-between;
//  margin-bottom: 20px;
//}
//
//@media (max-width: 768px) {
//  .waterfall {
//    .item {
//      width: 100%;
//    }
//  }
//}
</style>
